<template>
  <common-card title="今日交易用户数" :value="numberFormater(orderUser)">
    <div ref="barChartRef" style="width: 100%; height: 100%"></div>
    <template #footer>
      <div>退货率&nbsp;<span class="emphasis">{{ numberFormater(returnRate) }}%</span></div>
    </template>
  </common-card>
</template>
 
 <script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "TodayUsers",
});
</script>
 <script lang="ts" setup>
import CommonCard from "./CommonCard.vue";
import {useReportDataStore} from '@/stores/reportData'
import { ref, onMounted, computed,watch } from "vue";
import * as echarts from "echarts";
import type { EChartsType } from "echarts";
import useFormater from "@/hooks/useFormater";

const {moneyFormater,numberFormater} = useFormater()

const reportDataStore = useReportDataStore()
const barChartRef = ref();
let barChart: EChartsType;
//今日用户数
const orderUser = computed(()=>reportDataStore.reportData.orderUser)
//退货率
const returnRate = computed(()=>reportDataStore.reportData.returnRate)
//x轴
const xZhou = computed(()=>reportDataStore.reportData.orderTrendAxis)
// y轴
const yZhou = computed(()=>reportDataStore.reportData.orderTrend)
const getOption = () => {
  return {
    xAxis: {
      show: false,
      // data: [
      //   "一月",
      //   "二月",
      //   "三月",
      //   "四月",
      //   "五月",
      //   "六月",
      //   "七月",
      //   "八月",
      //   "九月",
      //   "十月",
      //   "十一月",
      //   "十二月",
      // ],
      data:xZhou.value
    },
    yAxis: {
      show: false,
    },
    tooltip: {},
    grid: {
      left: 0,
      right: 0,
    },
    series: {
      type: "bar",
      // data: [44, 126, 55, 88, 133, 99, 33, 113, 63, 98, 77, 123],
      data:yZhou.value
    },
  };
};

onMounted(() => {
  barChart = echarts.init(barChartRef.value);

  // barChart && barChart.setOption(getOption());

  window.addEventListener("resize", () => {
    barChart && barChart.resize();
  });
});
watch(yZhou,()=>{
  //当页面中计算属性里面有了数据之后 再来渲染页面图形
  barChart && barChart.setOption(getOption());
})
</script>
 
 <style scoped>
</style>